// 申请公司部门排行
import React from 'react';
import { Empty } from 'antd';
import ReactEcharts from '@/components/Echarts';
import colors from '@/theme';
import { dealOption } from '@/components/Echarts/Echarts';

const getOption = (data = [], selectedIndex) => ({
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}次 ({d}%)',
        position: 'left'
    },
    legend: {
        type: 'scroll',
        orient: 'horizontal',
        y: '10',
        data: data.map(item => ({
            name: item.companyName
        }))
    },
    series: [
        {
            name: data[selectedIndex]
                ? data[selectedIndex].companyName
                : '',
            type: 'pie',
            // selectedMode: 'single',
            radius: [0, '30%'],
            center: ['50%', '50%'],
            selectedOffset: 0,
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: data[selectedIndex]
                ? data[selectedIndex].children.map((item, index) => ({
                    name: item.departmentName,
                    value: item.number,
                    itemStyle: {
                        normal: {
                            color: colors[selectedIndex],
                            opacity:
                                      1 -
                                      0.1 *
                                          data[selectedIndex].children
                                              .slice(0, index)
                                              .filter(sub => sub.number > 0)
                                              .length
                        }
                    }
                }))
                : [],
            label: {
                normal: {
                    show: false,
                    position: 'inner',
                    formatter: '{d}%',
                    fontSize: 12
                }
            }
        },
        {
            name: '公司',
            type: 'pie',
            radius: ['40%', '55%'],
            center: ['50%', '50%'],
            selectedMode: 'single',
            selectedOffset: 5,
            data: data.map((item, index) => ({
                name: item.companyName,
                value: item.number,
                selected: index === selectedIndex,
                itemStyle: {
                    normal: {
                        color: colors[index]
                    }
                }
            })),
            label: {
                normal: {
                    position: 'inner',
                    formatter: '{d}%',
                    fontSize: 12
                }
            }
        }
    ]
});
const Ygbmfb = ({ data }) => {
    if (!data || data.length === 0) {
        return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
    }

    const onChartClick = (param, echarts) => {
        if (param.componentIndex === 1) {
            // changeIndex(param.dataIndex);
            echarts.setOption(dealOption(getOption(data, param.dataIndex), []));
        }
    };
    return (
        <ReactEcharts
            option={getOption(data, 0)}
            onEvents={{
                click: onChartClick
            }}
        />
    );
};

export default Ygbmfb;
